<template>
  <div class="container">
    <div class="is-size-4 ml-3 my-4 has-text-weight-bold">
      题库
      <div class="primary-color is-size-4">——</div>
    </div>

    <span class="mx-3">科目</span>
    <el-select
      v-model="subjectId"
      class="mb-5"
      placeholder="请选择科目"
      @change="getQuestionListById"
    >
      <el-option
        v-for="item in subjectList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>

    <el-table border stripe :data="questionListData" style="width: 95%">
      <el-table-column prop="info.desc" label="题干" />
      <el-table-column prop="gradeLevel" label="年级" width="60" />
      <el-table-column
        prop="questionType"
        label="题型"
        :formatter="difficultFormat"
        width="80"
      />
      <el-table-column prop="score" label="分值" width="70" />
      <el-table-column prop="difficult" label="难度" width="80" />
      <el-table-column
        prop="createTime"
        :formatter="dateFormat"
        label="创建日期"
        width="180"
      />

      <el-table-column label="操作" width="220">
        <template slot-scope="scope">
          <el-button
            size="small"
            icon="el-icon-edit"
            round
            @click="handleEdit(scope.row)"
          >编辑</el-button>
          <el-button
            size="small"
            type="danger"
            plain
            round
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
const commonApi = require('@/api/common')
const questionApi = require('@/api/question')
const dayjs = require('dayjs')
export default {
  data() {
    return {
      subjectList: [],
      subjectId: '',
      questionListData: []
    }
  },
  mounted() {
    commonApi.getSubjectList().then(res => {
      console.log('subjcet loaded')
      this.subjectList = res.data
      this.subjectId = res.data[0].id
      this.getQuestionListById()
    })
  },
  methods: {
    difficultFormat(row) {
      return row.questionType === 1 ? '单选题' : '多选题'
    },

    dateFormat(row, column, cellValue, index) {
      console.log(cellValue)
      if (cellValue) {
        return dayjs(cellValue).format('YYYY-MM-DD HH:mm')
      } else {
        return '-'
      }
    },

    // 编辑题目
    handleEdit(rowData) {
      rowData.subjectId = this.subjectId
      localStorage.setItem('qCache', JSON.stringify(rowData))
      this.$router.push({ name: 'editQuestion' })
    },

    // 删除题目
    handleDelete(rowData) {
      const qId = rowData.questionId
      this.$confirm('删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(qId)
        questionApi.deleteQuestion({ id: qId }).then(res => {
          this.$message({
            type: 'success',
            message: res.msg
          })
          this.getQuestionListById()
        })
      })
    },

    getQuestionListById() {
      questionApi.getQuestionListBySubject(this.subjectId).then(res => {
        this.questionListData = res.data
        console.log('getQuestionListById', res.data)
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  margin-bottom: 100px;
}

.btn {
  font-size: 17px;
  margin-bottom: 15px;
  width: 100%;
  height: 65px;
  text-align: left;
}
</style>
